<template>
  <k-view :class="['score-diagnosis-read', scoreInfo.score_inc_rate >= 0 ? 'up-bg' : 'down-bg']">
    <k-view class="score-block-view">
      <k-view>
        <k-view class="fl-s">
          <k-text class="system-score-text num-j-r">{{ scoreInfo.score_avg }}</k-text>
          <k-text
            :class="[
              'system-score-chg num-j-r',
              scoreInfo.score_inc_rate >= 0 ? 'red-font' : 'green-font',
            ]"
            >{{ scoreInfo.score_inc_rate >= 0 ? '+' : '' }}{{ scoreInfo.score_inc_rate }}%</k-text
          >
        </k-view>
        <k-view class="fl-c" v-click-outside="closeReadPoup">
          <k-text class="system-score-subTitle">{{ diagnosisInfo.scoreTitle }}</k-text>
          <k-image
            @click="changeReadPoup"
            v-if="chartType === 'tag' && modelValue"
            class="system-score-tip"
            :src="theme === 'dark' ? questionIconDark : questionIcon"
          ></k-image>
          <score-read-poup
            v-if="showReadPoup"
            :title="poupInfo.poupTitle"
            :content="poupInfo.poupContent"
            :linkId="poupInfo.poupKey"
            bottom="190px"
          ></score-read-poup>
        </k-view>
      </k-view>
      <k-view class="system-score-read" v-if="chartType === 'tag'">
        <system-score-tag
          :tag-name="item.tagName"
          :desc="item.desc"
          v-for="(item, index) in tagList"
          :key="index"
        ></system-score-tag>
      </k-view>
      <k-view class="system-score-chart" v-if="chartType === 'line'">
        <diagnosis-line-chart
          :block_type="chartDataParam.block_type"
          :block_code="chartDataParam.block_code"
        ></diagnosis-line-chart>
      </k-view>
    </k-view>
    <k-view class="diagnosis-read-artical">
      <k-image class="artical-icon" :src="readIcon"></k-image>
      <k-text v-if="modelValue" class="read-artical-text">{{ systemReadText }} </k-text>
      <k-text v-else class="read-artical-text">{{ diagnosisInfo.readArtical }} </k-text>
    </k-view>
  </k-view>
</template>

<script>
import readIcon from '@/assets/index/read-icon.png';
import ScoreReadPoup from '@/components/StockDiagnosis/scoreReadPoup.vue';
import { scoreDetailList, SYSTEM_READ } from '../../scripts/scoreDetail';
import lineChartImage from '@/assets/index/line-chart.png';
import questionIcon from '@/assets/index/question_icon.png';
import questionIconDark from '@/assets/index/question_icon_dark.png';
import SystemScoreTag from './systemScoreTag.vue';
import DiagnosisLineChart from './diagnosisLineChart.vue';
import ClickOutside from 'vue-click-outside';
import { sendClickStat } from '@/utils/stat';
import { PAGEID } from '@/config/stat';

const defaultSingleSysSore = {
  company_num: 0,
  high_score_num: 0,
  higher_avg_num: 0,
  higher_avg_rate: 0,
  highest_score: 0,
  market_company_num: 0,
  market_score_avg: 0,
  minimum_score: 0,
  report_date: '',
  score_avg: 0,
  score_inc: 0,
  score_inc_rate: 0,
};

const defaultDiagnosisInfo = {
  scoreTitle: '得分',
  readArtical: '',
};

export default {
  directives: {
    ClickOutside,
  },
  props: {
    theme: {
      type: String,
      default: '',
    },
    // 选中的tab的index
    modelValue: {
      type: Number,
      default: 1,
    },
    chartType: {
      type: String,
      default: 'line',
    },
    chartDataParam: {
      type: Object,
      default: function () {
        return {
          block_type: 'all_market',
          block_code: '',
        };
      },
    },
    singleSysSore: {
      type: Object,
      default: function () {
        return {
          score: '0',
          score_rate: '0',
          label: '',
        };
      },
    },
    scoreInfo: {
      type: Object,
      default: defaultSingleSysSore,
    },
    diagnosisInfo: {
      type: Object,
      default: defaultDiagnosisInfo,
    },
    evaluateInfo: {
      type: Object,
      default: () => {
        return {
          score: 0,
          market_score_avg: 0,
          score_rate: 0,
        };
      },
    },
    stockInfo: {
      type: Object,
      default: () => {
        return {
          code: '--',
          market: '',
          score: '--',
          name: '--',
        };
      },
    },
  },
  components: {
    ScoreReadPoup,
    SystemScoreTag,
    DiagnosisLineChart,
  },
  data() {
    return {
      showReadPoup: false,
      lineChartData: {
        x: ['01-31', '04-31', '07-30', '07-31'],
        y: {
          得分情况: [10, 50, 21, 60],
        },
      },
      readIcon,
      lineChartImage,
      questionIcon,
      questionIconDark,
    };
  },
  methods: {
    changeReadPoup() {
      sendClickStat(`${PAGEID.STOCK}.score_intro.${this.poupInfo.poupKey}.click`);
      this.showReadPoup = !this.showReadPoup;
    },
    closeReadPoup() {
      this.showReadPoup = false;
    },
    createReadTag() {
      const resObj = this.findReadTextObj();
      if (resObj && resObj.key && this.diagnosisInfo.readArtical) {
        const data = SYSTEM_READ[resObj.key][this.diagnosisInfo.readArtical];
        return [
          {
            tagName: data?.title || '中性',
            desc: this.diagnosisInfo.readArtical,
          },
          {
            tagName: this.scoreInfo.market_score_avg > this.scoreInfo.score_avg ? '低于' : '高于',
            desc: `${
              this.scoreInfo.market_score_avg > this.scoreInfo.score_avg ? '低于' : '高于'
            }行业平均分 ${Math.abs(
              this.scoreInfo.score_avg - this.scoreInfo?.market_score_avg
            ).toFixed(2)} 分`,
          },
        ];
      } else {
        return [
          {
            tagName: '中性',
            desc: '--',
          },
          {
            tagName: '中性',
            desc: '--',
          },
        ];
      }
    },
    // 获取解读运营文案
    findReadTextObj() {
      return scoreDetailList.find(item => item.id + '' === this.modelValue + '');
    },
  },
  computed: {
    poupInfo() {
      const resObj = this.findReadTextObj();
      if (resObj) {
        return {
          poupTitle: resObj.name,
          poupContent: resObj.content,
          poupKey: resObj.key,
        };
      } else {
        return {
          poupTitle: '',
          poupContent: '',
          poupKey: '',
        };
      }
    },
    // modelValue用于区分是自选股tab还是个股诊断
    // 自选股tab是0 个股诊断非0
    tagList() {
      if (this.modelValue) {
        return this.createReadTag();
      } else {
        return [
          {
            tagName: this.evaluateInfo.score < this.evaluateInfo.market_score_avg ? '低于' : '高于',
            desc: `${
              this.evaluateInfo.score < this.evaluateInfo.market_score_avg
                ? '低于市场平均分'
                : '高于市场平均分'
            } ${Math.abs(this.evaluateInfo.score - this.evaluateInfo.market_score_avg).toFixed(
              0
            )} 分`,
          },
          {
            tagName: '表现',
            desc: `得分击败 ${this.evaluateInfo?.score_rate?.toFixed()}% 的用户`,
          },
        ];
      }
    },
    systemReadText() {
      const resObj = this.findReadTextObj();
      if (resObj && resObj.key && this.diagnosisInfo.readArtical) {
        const data = SYSTEM_READ[resObj.key][this.diagnosisInfo.readArtical];
        if (data) {
          return `${this.stockInfo.name}${this.diagnosisInfo.readArtical}，${data.abstract}，${data.content}`;
        } else {
          return '';
        }
      } else {
        return '';
      }
    },
  },
};
</script>

<style lang="less">
.score-diagnosis-read {
  background: #fafafa;
  padding: 24px 16px;
  margin: 16px 0px 0px;
  box-sizing: border-box;
  border-radius: 8px;
  position: relative;
  background-repeat: no-repeat;
  background-size: 76px 90px;
  background-position: 0 0;
  .score-block-view {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 16px;
  }
  .fl-s {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
  }
  .fl-c {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .system-score-text {
    font-size: 48px;
    color: #262626;
    font-weight: 500;
  }
  .system-score-chg {
    margin-left: 8px;
    font-size: 28px;
    font-weight: 500;
  }
  .red-font {
    color: #ff2436;
  }
  .green-font {
    color: #07ab4b;
  }
  .system-score-subTitle {
    font-size: 24px;
    color: #595959;
    font-weight: 400;
    line-height: 34px;
  }
  .system-score-tip {
    width: 26px;
    height: 26px;
    margin-left: 8px;
  }
  .system-score-read {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 110px;
  }

  .diagnosis-read-artical {
    position: relative;
    text-indent: 74px;
    padding: 16px 0 0;
    min-height: 64px;
    .artical-icon {
      position: absolute;
      top: 20px;
      left: 0;
      width: 66px;
      height: 28px;
    }
    .read-artical-text {
      font-size: 26px;
      color: #595959;
      font-weight: 400;
      line-height: 40px;
    }
  }
}
.up-bg {
  background-image: url(../../assets/index/num_up_bg.png);
}
.down-bg {
  background-image: url(../../assets/index/num_down_bg.png);
}

[theme-mode='black'] {
  .score-diagnosis-read {
    background-color: #212121;
    .score-block-view {
      border-bottom-color: rgba(255, 255, 255, 0.06);
    }
    .system-score-text {
      color: rgba(255, 255, 255, 0.84);
    }
    .system-score-subTitle {
      color: rgba(255, 255, 255, 0.4);
    }
    .diagnosis-read-artical .read-artical-text {
      color: rgba(255, 255, 255, 0.6);
    }
  }
}
</style>
